<!--
 * @Author: jhw
 * @Date: 2025-08-13 14:46:20
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-13 15:01:09
 * @Description:
-->
<template>
  <div key="id">
    <div class="flex items-center mb-10px">
      <div class="mr-10">辅助文字</div>
      <el-switch :model-value="isUse" @change="switchChangeHandle" />
    </div>
    <div v-if="isUse">
      <el-input
        v-for="(_, index) in status"
        :key="index"
        class="mt-5px mb-5px"
        placeholder="辅助文字"
        v-model="textArr[index]"
        @input="(val: string) => inputHandle(val, index)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UpdateStatus, VueComType } from '@/types';
import { inject, ref } from 'vue';

const props = defineProps<{
  currentStatus: number;
  status: string[];
  isShow: boolean;
  isUse: boolean;
  configKey: string;
  editCom: VueComType;
  showName?: string;
}>();

const textArr = ref(props.status);
const updateStatus = inject<UpdateStatus>('updateStatus');
const inputHandle = (val: string, index: number) => {
  console.log('props.configKey', props.configKey);

  updateStatus?.(props.configKey, { val, index });
};

const switchChangeHandle = () => {
  updateStatus?.(props.configKey, !props.isUse);
};
</script>

<style scoped></style>
